.frm-table {
  width: 100%;
  height: 100%;
  background-color: white;

  &-container {
    //margin-bottom: 12px;
  }

  &-wrapper {
    position: relative;
    border: 1px solid #f0f0f0;
    overflow: hidden;
  }

  &-body-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    // 添加移动端滚动条样式支持
    -webkit-overflow-scrolling: touch;

    // 设置最大高度
    max-height: 40dvh;

    // 修复横屏模式下的滚动问题
    max-width: 100%; // 确保不会超出容器宽度

    // 禁用橡皮筋效果
    overscroll-behavior: none;
    overscroll-behavior: none;

    // 防止内容在滚动时移动
    transform: translateZ(0);
    transform: translateZ(0);
  }

  &-element {
    width: auto;
    min-width: 100%;
    border-collapse: collapse; // 移动端更推荐使用 collapse
    background: #fff;
    // 添加这些样式来防止内容移动
    transform: translateZ(0);

    th,
    td {
      padding: 12px 16px;
      text-align: left;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      word-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      font-size: 14px;
      min-width: 80px;
    }

    // 移除最右侧单元格的右边框
    th:last-child,
    td:last-child {
      border-right: none;
    }

    th {
      font-weight: 500;
      background-color: #fafafa;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // 添加sticky定位使表头固定
      position: sticky;
      top: 0;
      z-index: 10;
      // 添加这些样式来修复内容移动问题
      transform: translateZ(0); // 创建层叠上下文，防止渲染问题
    }

    td {
      line-height: 1.5;
      color: #333;
    }
  }

  // 简化滚动条样式，提高移动端兼容性
  &-body-wrapper::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &-body-wrapper::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
  }
}

// 添加可点击行的样式，遵循antd mobile设计规范
.frm-table-row-clickable {
  cursor: pointer;
  transition: background-color 0.3s;

  &:active {
    background-color: #f5f5f5;
  }

  // 添加波纹效果，符合移动端设计规范
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 10%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    pointer-events: none;
  }

  &.frm-table-row-ripple::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: none;
  }
}

// 全屏模式样式
.frm-table-fullscreen {
  transform: rotate(90deg);
  transform-origin: left top;
  width: 100dvh;
  height: 100dvw;
  translate: 100dvw 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 1000;
  display: flex;
  flex-direction: column;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; // 防止头部被压缩
  }

  &-title {
    font-size: 16px;
    font-weight: 500;
  }

  &-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .frm-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .frm-table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-bottom: 0;
    }

    .frm-table-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .frm-table-body-wrapper {
      flex: 1;
      // 修复全屏模式下的滚动问题
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      // 修复滚动条计算问题
      max-height: 50dvh; // 横屏模式下滚动条计算问题

      // 禁用橡皮筋效果
      overscroll-behavior: none;
      overscroll-behavior: none;

      // 防止内容在滚动时移动
      transform: translateZ(0);
      transform: translateZ(0);
    }
  }
}

// 横屏模式优化
@media screen and (orientation: landscape) {
  .frm-table-body-wrapper {
    max-height: 50vh; // 横屏时进一步限制高度
  }

  .frm-table-fullscreen .frm-table-fullscreen-content .frm-table-body-wrapper {
    //overflow-y: auto;
    max-height: none; // 全屏模式下不限制最大高度
  }
}
